<template>
  <div>
    <div class="loginForm">
      <div class="phoneForm">
        <div class="inputList">
          <input
            type="text"
            placeholder="手机号/账号/邮箱"
            maxlength="11"
            v-model="name"
            @blur="checkname"
          />
          <i class="empty" style="display: none;"></i>
        </div>
        <div class="inputList code">
          <input type="password" placeholder="请输入密码" maxlength="6" v-model="psw" />
          <i class="empty" style="display: none;"></i>
        </div>
        <div class="inputList code">
          <input type="text" placeholder="请输入验证码" maxlength="6" v-model="code" />
          <i class="empty" style="display: none;"></i>
          <div class="hu" @click="changeimg">
            <img :src="imgurl" alt />
          </div>
        </div>
      </div>
    </div>

    <button :class="(isok && psw && code)? 'loginBtnYes':'loginBtnNo'" @click="reguser">注册</button>
  </div>
</template>

<script>
import getdata from "@/api/userget.js";
export default {
  data() {
    return {
      imgurl: "https://www.defihome.xyz/api/user/code",
      name: "",
      psw: "",
      code: "",
      isok: false,
    };
  },
  components: {},

  methods: {
    //注册用户
    async reguser() {
      if (this.isok) {
        if (this.name && this.psw && this.code) {
          try {
            let str = "user/reg";
            let body = {
              name: this.name,
              password: this.psw,
              code: this.code,
            };
            let n = await getdata.reguser(str, body);
            if (n.data.flag) {
              this.$notify({ type: "success", message: "恭喜!注册成功" });
              this.$router.push({ path: "/login/phone" });
            } else {
              this.$notify({ type: "danger", message: n.data.message });
            }
          } catch (err) {
            console.log(err);
          }
        } else {
          this.$notify({ type: "danger", message: "请输入密码和验证码" });
        }
      } else {
        this.$notify({ type: "danger", message: "该用户名已被注册！" });
      }
    },
    //点击更换验证码
    changeimg() {
      this.imgurl = "https://www.defihome.xyz/api/user/code/?" + new Date();
    },
    //验证用户是否存在
    async checkname() {
      try {
        let name = this.name;
        let url = `user/checkname`;
        let n = await getdata.getdata(url, name);
        if (n.data.flag) {
          this.$notify({ type: "success", message: "恭喜！该用户名可以注册" });
          this.isok = true;
        } else {
          this.$notify({ type: "danger", message: n.data.message });
          this.isok = false;
        }
      } catch (err) {
        console.log(err);
      }
<<<<<<< HEAD
    }

  }
=======
    },
  },
>>>>>>> dengbo
};
</script>

<style lang="scss">
.loginForm {
  padding: 0.39rem 0.86rem;
  .inputList {
    position: relative;
    padding: 1.754981rem 1.00015rem;
    border-bottom: 1px solid #e6e6e6;

    input {
      display: block;
      border: none;
      outline: none;
      -webkit-appearance: none;
    }
  }
  .forget {
    position: absolute;
    bottom: 26.2rem;
    right: 1.75rem;
    font-size: 0.811444rem;
    color: #999;
  }
}
.login {
  background: linear-gradient(90deg, #a2edc7, #8cddc3);
  color: #d5f4e7;
  margin-top: 2.755131rem;
  width: 100%;
  line-height: 2.755131rem;
  font-size: 1.00015rem;
  border-radius: 0.24532rem;
  border: 0;
}
button {
  margin-top: 2.755131rem;
  width: 100%;
  line-height: 2.755131rem;
  font-size: 1.00015rem;
  border-radius: 0.24532rem;
  border: 0;
}
.suc {
  color: green;
}
.fai {
  color: red;
}

.loginBtnNo {
  background: linear-gradient(90deg, #a2edc7, #8cddc3);
  color: #d5f4e7;
}
button {
  margin-top: 2.755131rem;
  width: 100%;
  line-height: 2.755131rem;
  font-size: 1.00015rem;
  border-radius: 0.24532rem;
  border: 0;
}
</style>